<header>
    基本使用
</header>
<p>
    基于
    <a href="https://registry.khronos.org/webgl/specs/latest/1.0/" target="_blank">WebGL 1.0</a>
    开发的可交互的3D几何体绘制画笔，这里，我们将用几个简单的例子来说明如何使用。
</p>
<h2>
    准备画布
</h2>
<p>
    使用之前，我们首先需要准备一个设置了大小的节点，具体是用的div还是span或者别的都可以：
</p>
<pre tag="html">
<div id="mywebgl" style="width:400px;height:300px;"></div>
</pre>
<h2>
    获取画笔
</h2>
<p>
    准备好节点以后，就可以获取画笔了：
</p>
<pre tag="javascript">
import { WebGL } from 'vislite';

var painter = new WebGL(document.getElementById('mywebgl'));
</pre>
<h2>
    绘制
</h2>
<p>
    现在，画笔也有了，我们就可以直接用这支画笔绘制我们想要的内容了。
</p>
<p>
    比如我们想绘制一个三角形：
</p>
<pre tag="javascript">
painter.render({
    mesh: [{
        geometry: {
            attributes: {
                position: {
                    array: [
                        -1, 1, 1,
                        1, 1, -1,
                        -1, -1, 0
                    ],
                    count: 3,
                    itemSize: 3
                }
            },
            type: "TRIANGLES"
        },
        material: {
            color: {
                r: 1,
                g: 0,
                b: 0,
                alpha: 1
            }
        }
    }]
})
</pre>
<p>
    可以发现，mesh是一个数组，我们称为
    <span class="special">网格物体组</span>
    ，顾名思义，里面的每个条目就是一个
    <span class="special">
        网格物体
    </span>
    ，一个网格物体主要由两部分组成：几何结构 + 材质
</p>
<h3>
    几何结构
</h3>
<p>
    也就是这个网格物体的形状，比如立方体，球或者像这里是个三角形。
</p>
<p>
    在三维的世界里，任何物体都由点、直线段或三角形拼接而成，看本处的例子：
</p>
<pre tag="javascript">
geometry: {
    attributes: {
        position: {
            array: [
                -1, 1, 1,
                1, 1, -1,
                -1, -1, 0
            ],
            count: 3,
            itemSize: 3
        }
    },
    type: "TRIANGLES"
}
</pre>
<p>
    我们先看geometry.attributes.position，里面的array表示点的位置数据，一共3个点，而3个数据表示1个点（3*3，所以array长度是9），所以count和itemSize都是3。
</p>
<h4>
    坐标系
</h4>
<div class="warn">
    温馨提示：array的内容解释是 [ 点1x, 点1y, 点1z, 点2x, 点2y, 点2z, 点3x, 点3y, 点3z ]
    <hr />
    在此处的3D的世界中，坐标系满足右手坐标系，并且x轴向右，y轴向上，z轴垂直屏幕向外。原点在画布中心，范围均为-1～1。
    <br />
    <img src="./images/docs/webgl-coordinate.jpeg" style="margin-top:10px;" width="200px" />
</div>
<p>
    现在，3个点有了，再看type，type用以表示点如何拼接成几何体。
</p>
<p>
    比如这里设置的TRIANGLES，表示3个点组成一个三角形，然后这些三角形拼接最终几何体。因为这里就3个点，所以最终就是1个三角形。
</p>
<div class="warn">
    温馨提示：type可以选择的值及其解释你可以
    <button tag="painter3D" type="explain">点击查看</button>
    。
</div>
<h3>
    材质
</h3>
<p>
    也就是一个物体的表面每个点的颜色，注意，是每个点，还是先以这里为例：
</p>
<pre tag="javascript">
material: {
    color: {
        r: 1,
        g: 0,
        b: 0,
        alpha: 1
    }
}
</pre>
<p>
    material可以配置的属性不止color一个，如果你使用了color来设置，就表明这应该是一个纯色的，比如这里就是红色。
</p>
<div class="warn">
    温馨提示：r、g、b分别表示红、绿、蓝通道的值，只是取值范围不是0～255，而是0～1，alpha表示透明度，范围也是0～1。
</div>
<p>
    下面是完整的例子代码：
</p>
<example tag="course/webgl_1" height="340px"></example>